<template>
	<view class="play-page" :style="bgStyle">
		<view class="bg"></view>
		<view class="nav-bar">
			<view class="status_bar"></view>
			<view class="bar flex-box">
				<view class="icon-font" @tap="goBack">&#xe612;</view>
				<view class="bar-title ">
					<view>{{ curSong.name }}</view>
					<view class="singer">{{ curSong.singer }}</view>
				</view>
				<view class="icon-font">&#xe63d;</view>
			</view>
		</view>

		<view class="content">
			<!-- 拨条 -->
			<view class="strip-box" :class="playState ? 'active' : ''">
				<image class="img" src="https://s3.music.126.net/mobile-new/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862="></image>
			</view>

			<view class="play-poster">
				<div class="poster-box" :class="playState ? 'play' : 'pause'"><image class="img" v-if="curSongItem.picUrl" :src="curSongItem.picUrl + $imgSuffix"></image></div>
			</view>

			<view class="bot">
				<view class="handle flex-box">
					<view class="flex-item icon-font">&#xe60b;</view>
					<view class="flex-item icon-font">&#xe730;</view>
					<view class="flex-item icon-font">&#xe680;</view>
					<view class="flex-item icon-font">&#xe604;</view>
					<view class="flex-item icon-font">&#xe700;</view>
				</view>

				<view class="slider-bar flex-box">
					<view class="time star">{{ curPlayTimeNum }}</view>
					<slider
						class="line flex-item"
						activeColor="rgba(255,255,255,.5)"
						backgroundColor="rgba(255,255,255,.5)"
						block-size="12"
						:value="curPlayTime"
						min="0"
						:max="playTime"
						@change="sliderChange"
					/>
					<view class="time end">{{ playTimeNum }}</view>
				</view>

				<view class="play-handle flex-box">
					<view class="flex-item" @tap="setPlayModel">
						<view v-if="playModel === 0" class="icon-font">&#xe60d;</view>
						<view v-if="playModel === 1" class="icon-font">&#xe660;</view>
						<view v-if="playModel === 2" class="icon-font">&#xe6a8;</view>
					</view>
					<view class="flex-item icon-font" @tap="prevPlay">&#xe6d4;</view>
					<view class="flex-item" @tap="play">
						<view v-if="!playState" class="play icon-font">&#xe60f;</view>
						<view v-if="playState" class="play icon-font">&#xe601;</view>
					</view>
					<view class="flex-item icon-font" @tap="nextPlay(true)">&#xe6d8;</view>
					<view class="flex-item icon-font" @tap="showPlayList">&#xe690;</view>
				</view>
			</view>
		</view>

		<view>
			<view class="mark" v-show="isShowPlayList" @tap="closePlayList"></view>
			<view class="play-list-warp" :class="{ active: isShowPlayList }">
				<view class="warp">
					<view class="title">
						当前播放
						<text class="count">({{ audioList.length }})</text>
					</view>
					<view class="handle flex-box">
						<view class="flex-box">
							<view class="icon-font">&#xe660;</view>
							<view class="desc">随机播放</view>
						</view>
						<view class="flex-box">
							<view class="icon-font">&#xe61d;</view>
							<view class="desc">收藏全部</view>
							<view class="delimiter">|</view>
							<view class="icon-font">&#xe6dc;</view>
						</view>
					</view>
					<scroll-view class="list" :scroll-y="true">
						<view class="item flex-box" v-for="(item, index) in audioList" :key="index">
							<view class="name ellipsis" @tap="seleteSong(index)">
								<text v-if="curSong.id == item.id" class="active icon-font">&#xe708;</text>
								<text>{{ item.name }}</text>
								<text class="singer">- {{ item.singer }}</text>
							</view>
							<view class="icon-font" @tap="deleteSong(item.id)">&#xe62e;</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { getSongUrl, getSongDetail } from '@/api/index.js';

let backgroundAudioManager = '';
export default {
	data() {
		return {
			curSong: {}, // 当前播放歌曲
			audioList: [], // 播放列表
			playState: false, // 播放状态
			curPlayTime: 0, // 当前播放时间
			playTime: 0, // 全部时间
			curPlayIndex: 0, // 当前播放歌曲在播放列表中的索引
			playModel: 0, //播放方式 0顺序播放 1随机播放 2单曲循环
			curSongItem: {
				title: '',
				time: ''
			},
			isShowPlayList: false
		};
	},
	computed: {
		...mapGetters(['playList']),
		// 当前播放时长
		curPlayTimeNum() {
			return this.$pubFuc.formatSecond(this.curPlayTime);
		},
		// 单曲播放时长
		playTimeNum() {
			return this.$pubFuc.formatSecond(this.playTime);
		},
		bgStyle() {
			if (this.curSongItem.picUrl || this.curSong.picUrl) {
				return 'background-image:url(' + (this.curSongItem.picUrl || this.curSong.picUrl) + this.$imgSuffix + ')';
			} else {
				return '';
			}
		}
	},
	onLoad() {
		let isSearch = this.playList.isSearch;
		this.curSong = this.playList.curSong;
		
		this.audioList = this.playList.list;
		this.playState = this.playList.playState;
		
		// 实例化了音频播放管理
		if (!backgroundAudioManager) {
			// #ifdef H5
			backgroundAudioManager = uni.createInnerAudioContext();
			// #endif

			// 设置后台播放
			// #ifndef H5
			backgroundAudioManager = uni.getBackgroundAudioManager();
			// #endif

			console.log('实例化音频管理');
		}

		// 重新进入页面的时候判定后台音频是否为当前音频
		if (!(this.curSong.src && backgroundAudioManager.src && this.curSong.src == backgroundAudioManager.src)) {
			console.log('播放新曲了');
			this.playInit(true);
			return false;
		}

		this.playTime = this.curSong.time; // 歌曲总时长
		this.curPlayTime = backgroundAudioManager.currentTime; // 歌曲当前播放时间
		this.playState = !backgroundAudioManager.paused; // 播放状态
		this.playModel = this.curSong.playModel || 0; // 播放模式
		this.curSongItem.picUrl = this.curSong.picUrl; // 设置封面

		// #ifdef H5
		this.playState = this.playList.playState;
		uni.setNavigationBarTitle({
			title: this.curSong.name + ' - ' + this.curSong.singer + ' - 单曲 - 网易云音乐'
		});
		// #endif

		// 设置音频对象的方法
		this.setPlay();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		async playInit(isInit) {
			
			// 播放初始化
			if (isInit) {
				console.log('初始化了');
				// 设置音频对象的方法
				this.setPlay();
			}
			let curAudio
			if (this.curSong.id) {
				curAudio = this.curSong;
				this.curPlayIndex = this.audioList.findIndex(item => item.id === this.curSong.id);
			} else {
				if (this.curPlayIndex >= this.audioList.length) {
						this.curPlayIndex = 0;
				}
				curAudio = this.audioList[this.curPlayIndex];
			}
			
			let curId = curAudio.id;
			this.curPlayTime = 0;
			let [src, song] = await Promise.all([
				// 获取歌曲url
				getSongUrl(curId).then(res => {
					let src = res.data[0].url;
					if (!src) {
						this.$pubFuc.showToast('播放出现问题啦，播放下一首~');
						if (this.curPlayIndex < this.audioList.length - 1) {
							this.curPlayIndex++;
						} else {
							return false;
						}
						this.curPlayIndex++;
						this.playInit();
						return false;
					}
					return {
						src: src
					};
				}),
				// 获取歌曲详情
				getSongDetail(curId).then(res => {
					var song = res.songs[0];
					let singer = song.ar
						.map(art => {
							return art.name;
						})
						.join('/');
					return {
						name: song.name,
						picUrl: song.al.picUrl,
						singer,
						time: Math.floor(song.dt / 1000) // 播放时长
					};
				})
			]);
			this.curSongItem = { ...src, ...song };
			// 传递歌单信息到 store

			this.curSong = { ...curAudio, ...this.curSongItem, ...{ playModel: this.playModel } };

			this.$store.commit('SET_PLAY_LIST', {
				curSong: this.curSong
			});

			// 新的音频歌
			console.log('新的音频歌', this.curSong);
			backgroundAudioManager.title = this.curSong.name;
			backgroundAudioManager.singer = this.curSong.singer;
			backgroundAudioManager.coverImgUrl = this.curSong.picUrl;
			this.playTime = this.curSong.time;

			// 设置了 src 之后会自动播放
			backgroundAudioManager.src = this.curSong.src;
			// h5 设置autoplay自动播放
			
			backgroundAudioManager.autoplay = true;
			// #ifdef H5
			uni.setNavigationBarTitle({
				title: this.curSong.name + ' - ' + this.curSong.singer + ' - 单曲 - 网易云音乐'
			});
			// #endif
				
		},
		setPlay() {
			// 设置音频
			// 设置对应的歌曲索引
			let tempIndex = 0;
			this.audioList.forEach((item, index) => {
				if (this.curSong.id === item.id) {
					return (tempIndex = index);
				}
			});
			this.curPlayIndex = tempIndex;

			// 设置监听事件
			backgroundAudioManager.onPlay(() => {
				// 音乐播放事件
				this.playState = true;
				this.$store.dispatch('setPlayList', { playState: true });
			});
			backgroundAudioManager.onPause(() => {
				// 音乐暂停事件
				this.playState = false;
				this.$store.dispatch('setPlayList', { playState: false });
			});
			backgroundAudioManager.onTimeUpdate(e => {
				// 播放进度更新
				this.curPlayTime = Math.floor(backgroundAudioManager.currentTime);
			});
			backgroundAudioManager.onEnded(() => {
				// 播放自然结束
				this.nextPlay(true);
			});
		},
		nextPlay(isNext) {
			// 播放下一首
			if (this.playModel === 0) {
				// 顺序播放
				if (isNext) {
					// 默认下一首
					this.curPlayIndex = this.curPlayIndex >= this.audioList.length - 1 ? 0 : this.curPlayIndex + 1;
				} else {
					this.curPlayIndex = this.curPlayIndex < 1 ? this.audioList.length - 1 : this.curPlayIndex - 1;
				}
			}

			if (this.playModel === 1) {
				this.curPlayIndex = Math.floor(Math.random() * 10) % this.audioList.length;
			}

			// 再次初始化播放
			this.curSong = {};
			this.playInit();
		},
		prevPlay() {
			// 播放上一首
			this.nextPlay(false);
		},
		sliderChange(event) {
			// 拖动滑块
			this.curPlayTime = event.detail.value;
			backgroundAudioManager.seek(this.curPlayTime);
		},
		setPlayModel() {
			// 更换播放模式
			this.playModel = this.playModel > 1 ? 0 : this.playModel + 1;
			this.$pubFuc.showToast(['列表循环', '随机播放', '单曲循环'][this.playModel]);
		},
		play() {
			// 播放暂停
			if (this.playState) {
				//暂停
				backgroundAudioManager.pause();
			} else {
				//播放
				backgroundAudioManager.play();
			}
		},
		showPlayList() {
			this.isShowPlayList = true;
		},
		closePlayList() {
			this.isShowPlayList = false;
		},
		seleteSong(index) {
			if (index === this.curPlayIndex) {
				return;
			}
			this.curPlayIndex = index;
			this.curSong = {};
			this.playInit();
		},
		deleteSong(id) {
			
			// 删除歌曲
			if (this.audioList.length <= 1) {
				backgroundAudioManager.stop();
				this.$store.commit('SET_PLAY_LIST', { playList: [], curSong: {}, playState: false});
				this.goBack();
				return;
			}
			this.audioList = this.audioList.filter(item => {
				return id != item.id
			})

			this.$store.commit('SET_PLAY_LIST', { playList: this.audioList });

			if (id === this.curSong.id) {
				this.curSong = {};
				this.playInit();
			} else {
				// 更新当前播放的索引
				this.curPlayIndex = this.audioList.findIndex(item => item.id === this.curSong.id);
			}
		}
	},
	destroyed() {
		backgroundAudioManager.onPlay();
		backgroundAudioManager.onPause();
		backgroundAudioManager.onTimeUpdate();
		backgroundAudioManager.onEnded();
	}
};
</script>

<style lang="scss">
.mark {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.4);
}

.play-page {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg {
	position: fixed;
	z-index: 0;
	right: 0;
	left: 0;
	height: 100%;
	width: 100%;
	filter: blur(50rpx);
	background: inherit;
	z-index: -1;
	transform: scale(1.5);
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-bar {
	position: fixed;
	width: 100%;
	height: calc(var(--status-bar-height) + 44px);
	z-index: 10;
	color: #fff;
	background-color: transparent;
}

.bar {
	position: absolute;
	top: var(--status-bar-height) px;
	left: 0;
	height: 44px;
	width: 100%;
	z-index: 20;
	align-items: center;
	font-size: 38rpx;
	z-index: 20;

	.icon-font {
		font-size: 40rpx;
		margin: 0 30rpx;
	}

	.bar-title {
		height: 100%;
		width: 500rpx;
		font-size: 32rpx;
		overflow: hidden;
		.singer {
			font-size: 26rpx;
			color: #b3b3b3;
		}
	}
}

.content {
	.strip-box {
		position: absolute;
		width: 100%;
		top: 192rpx;

		height: 329rpx;
		z-index: 100;
		transform: rotate(-30deg);
		// 更改旋转原点为上方中心点
		transform-origin: center 0;
		transition: transform 0.3s;

		&:before {
			position: absolute;
			content: '';
			top: -20rpx;
			left: 350rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			background: #fff;
			z-index: 100;
		}

		&.active {
			transform: rotate(0deg);
		}

		.img {
			width: 200rpx;
			height: 300rpx;
			margin-left: 340rpx;
		}
	}

	.play-poster {
		margin: 340rpx auto 0;
	}

	.poster-box {
		display: flex;
		width: 600rpx;
		height: 600rpx;
		margin: 0 auto;
		background: url(https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48=);
		background-size: 100%;
		align-items: center;
		justify-content: center;
		animation: circling 20s linear infinite;

		&.pause {
			animation-play-state: paused;
		}

		.img {
			display: block;
			margin: 0 auto;
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			border: solid 16rpx rgba(0, 0, 0, 0.15);
		}
	}

	@-webkit-keyframes circling {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(1turn);
		}
	}

	.bot {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		width: 100%;

		.handle {
			padding: 0 50rpx;
			text-align: center;
			color: #e3e3e3;
			.icon-font {
				font-size: 45rpx;
			}
		}
	}

	.slider-bar {
		color: rgba(255, 255, 255, 0.6);
		padding: 20rpx 10rpx;
		justify-content: space-between;
		.line {
			margin: 0;
			border-radius: 2rpx;
		}

		.time {
			height: 36rpx;
			width: 80rpx;
			margin-right: 10rpx;
			font-size: 36rpx;
			line-height: 76rpx;
			transform: scale(0.5) translateY(-50%);
		}
		.end {
			color: #c0c0c0;
		}
	}

	.play-handle {
		padding: 0 50rpx;
		text-align: center;
		align-items: center;
		color: #e3e3e3;

		.icon-font {
			font-size: 45rpx;
		}

		.play {
			font-size: 95rpx;
		}
	}
}

.play-list-warp {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-height: 900rpx;
	z-index: 110;
	background-color: #ffffff;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;

	transition: transform 0.3s;
	transform: translateY(100%);

	&.active {
		transform: translateY(0);
	}

	.warp {
		width: 700rpx;
		margin: 30rpx auto 0;
	}

	.title {
		height: 50rpx;
		font-size: 34rpx;
		font-weight: 800;

		.count {
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.handle {
		justify-content: space-between;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;

		.desc {
			margin-left: 10rpx;
		}

		.delimiter {
			margin: 0 20rpx;
			color: rgba(0, 0, 0, 0.1);
		}

		.icon-font {
			font-size: 40rpx;
			color: rgba(0, 0, 0, 0.3);
		}
	}

	.list {
		max-height: 690rpx;
		.item {
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
		}

		.icon-font {
			font-size: 40rpx;
			color: rgba(0, 0, 0, 0.3);
		}

		.name {
			font-size: 30rpx;
			width: 600rpx;
			.active {
				font-weight: 600;
				font-size: 35rpx;
				color: #ff0000;
				margin-right: 10rpx;
			}
		}

		.singer {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
		}
	}
}

.showplaylist {
	display: none;
}
</style>
